<template>
	<transition name='movein'>
		<div ref='food' id="foodDetail" v-show="detailShow">
			<div class="overflow">
				<div class="food-content">
					<div class="foodImg">
						<img :src="food.image"/>
						<div class="back" @click="hideDetail">一个返回按钮</div>
					</div>
					<div class="content">
						<div class="title">{{food.name}}</div>
						<div class="detail">
							<span class="sell-count">月售{{food.sellCount}}份</span>
							<span class="rating">好评率{{food.rating}}%</span>
						</div>
						<div class="price">
							<span class="newprice">￥{{food.price}}</span>
							<span v-show="food.oldPrice" class="oldprice"> <del>￥{{food.oldPrice}}</del> </span>
						</div>
						<div class="cartControl" v-show="food.count>0">
							<v-cartcontrol @cartadd='_dropFood' :food='food'></v-cartcontrol>
						</div>
						<div v-show="!food.count" @click="addFood($event)" class="buy_Btn" >加入购物车</div>
					</div>
				</div>
				<v-split v-show="food.info"></v-split>
				<div class="food-introduce" v-show="food.info">
					<div class="introduce-tit">商品介绍</div>
					<div class="introduce-content">{{food.info}}</div>
				</div>
				<v-split></v-split>
				<div class="rating">
					<div class="rating-top">
						<h3 class="rating-name">商品评价</h3>
					</div>
					<v-ratings @stype='changeType' @togContent='togContent' :ratings='food.ratings' :select-type='selectType' :only-content='onlyContent' :desc='desc'></v-ratings>
					<div class="rating-wrapper">
						<ul v-show="food.ratings && food.ratings.length">
							<li v-for="rating in food.ratings" class="rating-item clearfix" v-show="ratingShow(rating.rateType,rating.text)"> 
								<div class="user fr">
									<span class="name">{{rating.username}}</span>
									<img :src="rating.avatar" class="avatar"/>
								</div>
								<div class="time">{{getStanDate(rating.rateTime)}}</div>
								<p class="text">
									<span class="icon_rating" :class="{'ratLike': rating.rateType==0}"></span>
									<span class="text_rating">{{rating.text}}</span>
								</p>
							</li>
						</ul>
						<div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评论</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import Bscroll from 'better-scroll'
	import cartcontrol from '../public/cartcontrol.vue'
	import split from '../public/split.vue'
	import foodRatings from '../public/foodRatings.vue'
	import {formatData} from '../../common/js/date.js'
	import Vue from 'vue'
	const POSITIVE = 0;/*积极*/
	const NEGATIVE = 1;/*消极*/
	const ALL = 2;/*所有*/
	export default {
		props: {
			food: {
				type: Object
			}
		},
		data() {
			return {
				detailShow: false,
				addCartShow: true,
				selectType: ALL,
				onlyContent: false,/*只看有内容的评论*/
				desc:{
					all: '全部',
					positive: '推荐',
					negative: '吐槽'
				}
			}
		},
		components:{
			'v-cartcontrol': cartcontrol,
			'v-split': split,
			'v-ratings': foodRatings
		},
		methods: {
			getStanDate(time){
				return formatData(time,'yyyy-MM-dd hh:mm');
			},
			ratingShow(rateType,text){
				//rateType,0与1,喜欢与讨厌
				/*let flag = true;
				if(this.onlyContent&&!text) flag = false;
				if(this.selectType!=2 && this.selectType!=rateType)flag = false;
				return flag;*/
				if(this.onlyContent&&!text){return false};
				if(this.selectType==2){
					return true;
				}else {
					return this.selectType==rateType
				}
			},
			changeType(selecttype){
				this.selectType = selecttype;
				/*this.$nextTick(()=>{
					this.foodScroll.refresh();
				})*/
			},
			togContent(togContent){
				this.onlyContent = togContent;
				/*this.$nextTick(()=>{
					this.foodScroll.refresh();
				})*/
			},
			showDetail() {
				/*初始化评论参数*/
				/*this.selectType = ALL;
				this.onlyContent = false;*/
				if(this.food){
					this.detailShow = true;
				}
				this.$nextTick(()=>{
					if(!this.foodScroll){
						this.foodScroll = new Bscroll(this.$refs.food,{
							click:true
						})
					}else{
						this.foodScroll.refresh();
					}
				})
			},
			hideDetail(){
				this.detailShow = false;
			},
			addFood(event){
				if(!event._constructed){
					return;
				}
				Vue.set(this.food,'count',1)
				console.log(this.food)
			},
			_dropFood(target){
				console.log(target)
			}
		}
	}
</script>

<style lang="stylus">
	.no-rating{
		padding: 16px 0;
		font-size: 12px;
		color: rgb(147,153,159);
	}
	/*评论列表*/
	.rating-wrapper{
		padding: 0 18px;
		.rating-item{
			border-bottom: 1px solid rgba(7,17,27,0.1);
			padding: 16px 0;
			.user{
				.name{
					font-size: 10px;
					color: rgb(147,153,159);
					margin-right: 6px;
				}
				.avatar{
					vertical-align: top;
					width: 24px;
					height: 24px;
					border-radius: 50%;
				}
			}
			.time{
				margin-bottom: 6px;
				font-size: 10px;
				color: rgb(147,153,159);
			}
			.text{
				.icon_rating{
					margin-right: 4px;
					width: 11px;
					height: 10px;
					display: inline-block;
					background-repeat:no-repeat ;
					background-size:contain ;
					background-image: url(../../assets/down.fw.png);
					&.ratLike{
						background-image: url(../../assets/up.fw.png);
					}
				}
				.text_rating{
					font-size: 12px;
					color: rgb(7,17,27);
				}
			}
		}
	}
	/*商品介绍*/
	.food-introduce{
		padding:18px;
		.introduce-tit{
			padding-bottom: 6px;
			font-size: 14px;
			color: #1c242c;
		}
		.introduce-content{
			font-size: 12px;
			line-height: 24px;
			color: rgb(77,85,93);
		}
	}
	.rating-top{
		padding:18px;
		.rating-name{
			font-size: 14px;
			color: #1c242c;
		}
	}
	#foodDetail {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 48px;
		z-index: 30;
		background: #fff;
		transition: all 0.3s;
	}
	
	&.movein-enter,&.movein-leave-active {
		transform: translate3d(100%,0,0);
	}	
	.food-content {
		.foodImg{
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 100%;
			img{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.back{
				position: absolute;
				left: 10px;
				top: 10px;
				background: #C0C0C0;
				font-size: 10px;
				padding: 5px 10px;
			}
		}
		.content{
			position: relative;
			padding: 18px;
			.title{
				font-size: 14px;
				font-weight: 700;
				color: rgb(7,17,27);
				/*line-height: 28px;*/
				margin-bottom: 8px;
			}
			.detail{
				font-size: 10px;
				color: rgb(147,153,159);
				/*line-height: ;*/
				margin-bottom: 18px;
			}
			.price{
				
			}
			.buy_Btn{
				position: absolute;
				right: 18px;
				bottom: 18px;
				height: 24px;
				padding: 0 12px;
				line-height: 24px;
				background: rgb(0,160,220);
				color: #fff;
				border-radius: 12px;
				text-align: center;
				font-size: 10px;
			}
			.cartControl{
				position: absolute;
				right: 18px;
				bottom: 18px;
			}
		}
	}
</style>